* {
	margin: 0px;
	padding: 0px;
}
html,body{
	height:100%;
	width:100%;
}

ul,
ol {
	list-style: none;
}

body {
	position: fixed;
	left: 0px;
	top: 0px;
}

.canvas {
	background: white;
	display: block;
	position: fixed;
	left: 0px;
	top: 0px;
}
span{
	position: fixed;
	left:0;
	top:0;
	font-size:0.9em;
	display:block;
	height:30px;
	width:40px;
	line-height:30px;
	text-align: center;
	background-color:#666;
	color:white;
}
/*绝对定位后橡皮擦不会出现滚条*/

.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
	cursor:pointer;
}

.tool {
	position: fixed;
	left: 40px;
	top: 0;
	width:100%;
	border-bottom:1px solid black;
	border-left:1px solid black;
	background-color:#999;
}

.tool svg {
	margin: 0 15px;
	width: 28px;
	height: 28px;
}

.tool svg.active {
	fill:rgba(255,0,0,.5);
	transform: scale(1.2);
	transition: all 0.3s;
}

#change{
	position: fixed;
	top: 30px;
	left:0;
	width:40px;
	height:100%;
	border-right:1px solid black;
	border-top:1px solid black;
	background-color:#999;
}

.colors {
	position: fixed;
	left: 7px;
	top: 32px;
}

.colors>li {
	width: 18px;
	height: 18px;
	border-radius: 60%;
	border: 1px solid transparent;
	margin: 25px 0px;
	cursor: pointer;
}

.colors>li:last-child {
	margin-bottom: 0px;
}

.colors>li.black {
	background: black;
}

.colors>li.red {
	background: red;
}

.colors>li.green {
	background: greenyellow;
}

.colors>li.blue {
	background: #11ffff;
}

.colors>li.active {
	transform: scale(1.1);
	transition: all 0.3s;
	box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.5);
}

.sizes {
	position: fixed;
	left: 7px;
	top: 210px;
}

.sizes>li {
	width: 18px;
	height: 0px;
	margin: 25px 0px;
	cursor:pointer;
}

.sizes>li.thin {
	border-bottom: 2px solid black;
}

.sizes>li.thick {
	border-bottom: 8px solid black;
}

.sizes>li.active {
	transform: scale(1.3);
	transition: all 0.3s;
	box-shadow: 0 0 4px 4px rgba(255,255,255,.5);
}
